<template>
            <el-tab-pane name="first"> 
                <template #label >
                    <span class="custom-tabs-label">
                    <!-- <el-icon><calendar /></el-icon> -->
                    <span>需求</span>
                    </span>
                </template>
                <!-- 这里是内容 -->
                <el-table v-loading="loading" :data="projectList">
                    <el-table-column label="标题" prop="title" width="260" />
                    
                    <el-table-column label="状态">
                            <template #default ="{ row }">
                                <el-popover
                                    placement="bottom"
                                    :width="200"
                                    trigger="click">
                                    <template #reference>
                                        <el-button v-if="row.status === '规划中'"
                                            style="font-style:consolar;color:#67c23a;" type="success" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '实现中'"
                                            style="font-style:consolar;color:#79bbff;" type="primary" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '已实现'"
                                            style="font-style:consolar;color:#f56c6c;" type="danger" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '已拒绝'"
                                            style="font-style:consolar;color:#43464b;" plain round class="custom-button1 custom-button"  >
                                            {{ row.status }}
                                        </el-button>
                                    </template>
                                    <!-- // 这里是弹出框的内容 -->
                                    <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                        <el-button @click="changeStatus(row,'规划中',row.priority)">
                                            规划中
                                        </el-button >
                                        <el-button @click="changeStatus(row,'实现中',row.priority)">
                                            实现中
                                        </el-button>
                                        <el-button @click="changeStatus(row,'已实现',row.priority)">
                                            已实现
                                        </el-button>
                                        <el-button @click="changeStatus(row,'已拒绝',row.priority)">
                                            已拒绝
                                        </el-button>
                                    </div>
                                </el-popover>
                            </template>
                    </el-table-column>

                    <el-table-column label="优先级" width="120" >
                        <template #default ="{ row }">
                            <el-popover
                                placement="bottom"
                                :width="200"
                                trigger="click">
                                <template #reference>
                                    <el-button style="width:4vw" text v-if="row.priority === ''">
                                        -
                                    </el-button>
                                    <el-button style="width:4vw" type="info" v-if="row.priority === 'Low'">
                                        {{ row.priority}}
                                    </el-button>
                                    <el-button style="width:4vw" type="success" v-if="row.priority === 'Middle'">
                                        {{ row.priority}}
                                    </el-button>
                                    <el-button style="width:4vw" type="danger" v-if="row.priority === 'High'">
                                        {{ row.priority}}
                                    </el-button>
                                </template>
                                <!-- // 这里是弹出框的内容 -->
                                <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                        <el-button @click="changeStatus(row,row.status,'')">
                                            空
                                        </el-button >
                                        <el-button @click="changeStatus(row,row.status,'Low')">
                                            Low
                                        </el-button>
                                        <el-button @click="changeStatus(row,row.status,'Middle')">
                                            Middle
                                        </el-button>
                                        <el-button @click="changeStatus(row,row.status,'High')">
                                            High
                                        </el-button>
                                    </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column label="预计结束"  width="160">
                        <template #default="{ row }">
                            <div class="block">
                                <el-date-picker
                                    style="width:140px"
                                    v-model="row.time"
                                    type="datetime"
                                    prefix-icon="none"
                                    placeholder="-"
                                    format="YYYY-MM-DD HH:mm"/>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="处理人"  >
                        <template #default="{ row }" >
                            <svg style="position: relative;top: 5px;" t="1714220202901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="22" height="22"><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6A460.8 460.8 0 0 1 512 51.2zM433.088 192.64c-3.712 0.192-8.896 0.448-13.632 1.728-11.904 3.072-15.104 10.624-16 14.784-1.344 7.104 1.088 12.544 2.688 16.128 0.256 0.512 0.512 1.152 0 2.88a54.272 54.272 0 0 1-11.2 11.456c-1.216 1.024-30.144 25.984-31.808 58.688a291.84 291.84 0 0 0 1.152 90.176c0.32 1.472 0.64 3.648 0 5.12-5.44 4.992-11.648 10.432-11.648 23.104 0.064 1.28 1.856 31.552 20.8 58.112 4.352 6.144 10.048 12.416 16.064 19.008 19.2 21.12 43.008 47.36 47.04 91.776 1.6 17.472 0.768 24 0.448 25.728l-0.64 1.28-0.384 1.344c0 0.128-3.648 9.408-44.544 19.84-23.68 6.08-46.912 9.152-47.616 9.28-30.208 5.12-55.68 14.144-75.904 26.88-15.808 9.6-29.056 22.912-38.72 38.656-14.528 24.256-14.08 46.272-13.888 50.304v14.4a12.16 12.16 0 0 0 12.352 12.032h568.768a12.16 12.16 0 0 0 12.352-12.032v-14.336a90.24 90.24 0 0 0-13.376-49.728 117.12 117.12 0 0 0-38.72-38.592c-20.16-12.8-45.824-22.016-76.928-27.712-0.256 0-23.296-3.072-46.912-9.088-41.088-10.496-44.672-19.776-44.8-19.84a11.904 11.904 0 0 0-0.96-2.688c-0.32-1.728-1.152-8.256 0.448-25.728 4.032-44.416 27.84-70.592 46.976-91.712 6.016-6.656 11.712-12.928 16.128-19.072 11.968-17.408 19.136-37.632 20.8-58.688a31.296 31.296 0 0 0-1.408-9.792 29.888 29.888 0 0 0-7.936-12.032l-1.728-1.92c-0.192-0.192-0.704-0.768-0.256-3.776 1.728-10.944 2.688-20.224 3.2-28.992a281.6 281.6 0 0 0-2.496-61.824 94.208 94.208 0 0 0-2.688-12.864 101.376 101.376 0 0 0-20.672-40.192l-1.28-1.28c-7.808-7.552-50.176-43.2-155.712-51.072a376.128 376.128 0 0 0-47.36 0.256z" p-id="7486" fill="#8a8a8a"></path></svg>
                            <span v-for="handler in row.handlerArray" :key="handler.id">{{ handler.realName}};</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间" >
                        <template #default="{ row }">
                            {{ dayjs(row.createdAt).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                </el-table> 
            </el-tab-pane>
            
            <el-tab-pane label="缺陷" name="3">
                <template #label >
                    <span class="custom-tabs-label">
                    <!-- <el-icon><calendar /></el-icon> -->
                    <span>缺陷</span>
                    </span>
                </template>
                <!-- 这里是内容 -->
                <el-table v-loading="loading" :data="projectList">
                    <el-table-column label="标题" prop="title" width="260" />
                    
                    <el-table-column label="状态">
                            <template #default ="{ row }">
                                <el-popover
                                    placement="bottom"
                                    :width="200"
                                    trigger="click">
                                    <template #reference>
                                        <el-button v-if="row.status === '规划中'"
                                            style="font-style:consolar;color:#67c23a;" type="success" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '实现中'"
                                            style="font-style:consolar;color:#79bbff;" type="primary" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '已实现'"
                                            style="font-style:consolar;color:#f56c6c;" type="danger" plain  round class="custom-button" >
                                            {{ row.status }}
                                        </el-button>
                                        <el-button v-if="row.status === '已拒绝'"
                                            style="font-style:consolar;color:#43464b;" plain round class="custom-button1 custom-button"  >
                                            {{ row.status }}
                                        </el-button>
                                    </template>
                                    <!-- // 这里是弹出框的内容 -->
                                    <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                        <el-button @click="changeStatus(row,'规划中',row.priority)">
                                            规划中
                                        </el-button >
                                        <el-button @click="changeStatus(row,'实现中',row.priority)">
                                            实现中
                                        </el-button>
                                        <el-button @click="changeStatus(row,'已实现',row.priority)">
                                            已实现
                                        </el-button>
                                        <el-button @click="changeStatus(row,'已拒绝',row.priority)">
                                            已拒绝
                                        </el-button>
                                    </div>
                                </el-popover>
                            </template>
                    </el-table-column>

                    <el-table-column label="优先级" width="120" >
                        <template #default ="{ row }">
                            <el-popover
                                placement="bottom"
                                :width="200"
                                trigger="click">
                                <template #reference>
                                    <el-button style="width:4vw" text v-if="row.priority === ''">
                                        -
                                    </el-button>
                                    <el-button style="width:4vw" type="info" v-if="row.priority === 'Low'">
                                        {{ row.priority}}
                                    </el-button>
                                    <el-button style="width:4vw" type="success" v-if="row.priority === 'Middle'">
                                        {{ row.priority}}
                                    </el-button>
                                    <el-button style="width:4vw" type="danger" v-if="row.priority === 'High'">
                                        {{ row.priority}}
                                    </el-button>
                                </template>
                                <!-- // 这里是弹出框的内容 -->
                                <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                        <el-button @click="changeStatus(row,row.status,'')">
                                            空
                                        </el-button >
                                        <el-button @click="changeStatus(row,row.status,'Low')">
                                            Low
                                        </el-button>
                                        <el-button @click="changeStatus(row,row.status,'Middle')">
                                            Middle
                                        </el-button>
                                        <el-button @click="changeStatus(row,row.status,'High')">
                                            High
                                        </el-button>
                                    </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column label="预计结束"  width="160">
                        <template #default="{ row }">
                            <div class="block">
                                <el-date-picker
                                    style="width:140px"
                                    v-model="row.time"
                                    type="datetime"
                                    prefix-icon="none"
                                    placeholder="-"
                                    format="YYYY-MM-DD HH:mm"/>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="处理人"  >
                        <template #default="{ row }" >
                            <svg style="position: relative;top: 5px;" t="1714220202901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="22" height="22"><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6A460.8 460.8 0 0 1 512 51.2zM433.088 192.64c-3.712 0.192-8.896 0.448-13.632 1.728-11.904 3.072-15.104 10.624-16 14.784-1.344 7.104 1.088 12.544 2.688 16.128 0.256 0.512 0.512 1.152 0 2.88a54.272 54.272 0 0 1-11.2 11.456c-1.216 1.024-30.144 25.984-31.808 58.688a291.84 291.84 0 0 0 1.152 90.176c0.32 1.472 0.64 3.648 0 5.12-5.44 4.992-11.648 10.432-11.648 23.104 0.064 1.28 1.856 31.552 20.8 58.112 4.352 6.144 10.048 12.416 16.064 19.008 19.2 21.12 43.008 47.36 47.04 91.776 1.6 17.472 0.768 24 0.448 25.728l-0.64 1.28-0.384 1.344c0 0.128-3.648 9.408-44.544 19.84-23.68 6.08-46.912 9.152-47.616 9.28-30.208 5.12-55.68 14.144-75.904 26.88-15.808 9.6-29.056 22.912-38.72 38.656-14.528 24.256-14.08 46.272-13.888 50.304v14.4a12.16 12.16 0 0 0 12.352 12.032h568.768a12.16 12.16 0 0 0 12.352-12.032v-14.336a90.24 90.24 0 0 0-13.376-49.728 117.12 117.12 0 0 0-38.72-38.592c-20.16-12.8-45.824-22.016-76.928-27.712-0.256 0-23.296-3.072-46.912-9.088-41.088-10.496-44.672-19.776-44.8-19.84a11.904 11.904 0 0 0-0.96-2.688c-0.32-1.728-1.152-8.256 0.448-25.728 4.032-44.416 27.84-70.592 46.976-91.712 6.016-6.656 11.712-12.928 16.128-19.072 11.968-17.408 19.136-37.632 20.8-58.688a31.296 31.296 0 0 0-1.408-9.792 29.888 29.888 0 0 0-7.936-12.032l-1.728-1.92c-0.192-0.192-0.704-0.768-0.256-3.776 1.728-10.944 2.688-20.224 3.2-28.992a281.6 281.6 0 0 0-2.496-61.824 94.208 94.208 0 0 0-2.688-12.864 101.376 101.376 0 0 0-20.672-40.192l-1.28-1.28c-7.808-7.552-50.176-43.2-155.712-51.072a376.128 376.128 0 0 0-47.36 0.256z" p-id="7486" fill="#8a8a8a"></path></svg>
                            <span v-for="handler in row.handlerArray" :key="handler.id">{{ handler.realName}};</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间" >
                        <template #default="{ row }">
                            {{ dayjs(row.createdAt).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                </el-table> 
            </el-tab-pane>
</template>

<script setup>
import { formatTime } from '@/utils/format.js'
import { onMounted, ref,watch } from 'vue'
import { GetProjectDetail,flowNeed } from '@/api/project.js'
import { useRouter ,useRoute } from 'vue-router';
import { dayjs } from 'element-plus'


const loading = ref(true)
//全部路由器
const router = useRouter()
//当前路由的参数
const route = useRoute()

// 定义当前选中的标签页索引，默认选中需求标签页（索引为1）
const currentTab = "first"

onMounted(() => {
    projectDetail(route.query.id);
    })

//需求流转 改变状态
const changeStatus = (row,STATE,priority) => {
const status = 
    {
    needId:row.id,

    status:STATE,

    priority:priority,

    comment:'',

    handlerArray:row.handlerArray,

}
const res = flowNeed(status)
res.then((res) => {
    console.log(res.data.data);
    if(res.data.code === 200){
        window.location.reload()
    }
})
}


watch(() => route.query.projectName, (newValue, oldValue) => {
// console.log('路由参数发生变化:', newValue,oldValue);
// console.log('6666',route.query);当前路由的参数

//TODO 在这里进行相应的操作，比如发起请求、更新数据等
if(route.query.id)
projectDetail(route.query.id);
});

//发送空间详情请求
const projectDetail = async (projectId) =>{
    const res = GetProjectDetail(projectId);
    // console.log(res);
    res.then((res) => {
        projectList.value = res.data.data
        console.log('dsadas',res.data);
    })
    loading.value = false;
    }
//当前空间项目列表
const projectList = ref([])

</script>


<style lang="scss" scoped>

.el-header{
display: flex;
align-items: center;
height: 50px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.el-main{
height: calc(100vh - 100px);
}
.custom-button{
background-color: transparent !important; /* 设置背景颜色为透明 */
}
.custom-button1:hover{
border-color: #272c33;
}

.pop-content{
> .el-button{
    margin: 4px 0;
}
}



</style>

<style lang="scss">
// 修改elementplus时间选择器图标占位符
.el-input__prefix{
width: 0px !important;
height: 0px !important;
}
.el-input.el-input--prefix.el-input--suffix.el-date-editor.el-date-editor--datetime.el-tooltip__trigger.el-tooltip__trigger
{

border: none !important;;
}
.el-table_1_column_3.el-table__cell{
width: 3vw;
}

// 修改整个表格边框
.el-tabs__content{
padding: 0px!important;
}

//修改tab下选择样式
.el-tabs__nav-wrap:after{
background-color: #e3dce100;
border-bottom: 1px solid #ebeef5;
}
//修改tab下margin
.el-tabs__header{
margin-bottom: 2px;
}

// 取消时间显示边框 点击添加样式
.el-table__body .el-input__wrapper{
box-shadow: none ;
}
.el-table__body .el-input__wrapper.is-focus{
box-shadow:0 0 0 1px var(--el-input-focus-border-color) inset
}

//tab修改悬浮图标
.el-tabs__item.is-disabled {
font-size: 20px;
color: black;
cursor: default;
}

</style>